<template>
    <div class="mb-3 flex justify-between items-center">
        <div class="font-bold flex items-center gap-2">
            <SvgIcon :name="'ion:sparkles-outline'" class="text-lg" :iconify="true"/>
            <span>{{title}}</span>
        </div>
        <div class="ml-auto flex items-center gap-2">
            <model-select :id="chatStore.modelId"  class="w-auto" style="width:180px"/>
            <el-button type="primary" size="small" @click="handleClear">
                <template #icon>
                    <SvgIcon :name="'fluent:delete-12-regular'" class="text-[14px]" :iconify="true"/>
                </template>
                {{ $t('aigcChat.clearMessage') }}
            </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import {useI18n} from 'vue-i18n';
    import { useMessage, useMessageBox } from '/@/hooks/message';
    import {useChatStore} from "/@/stores/aigc/chatStore";
    import {cleanMessage} from '/@/api/aigc/chat';
    const ModelSelect = defineAsyncComponent(() => import('/@/views/aigc/model/modelSelect.vue'));
    const {t} = useI18n();
    const props = defineProps({
        title: String
    });
    const emit=defineEmits(['reload']);

    const chatStore = useChatStore();
    const handleClear = () => {
        useMessageBox().confirm(t('chat.clearMessageTip')).then(() => {
            cleanMessage(chatStore.conversationId).then(() => {
                useMessage().success(t('chat.clearSuccess'));
                emit('reload');
            });
        });
    }
</script>